<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html dir="ltr">
<head>
	<title>${fns:getConfig('productName')}</title>
	<script src="${ctx}/static/assets/bootstrap/js/app.js"></script>
	<script type="text/javascript">

		$(document).ready(function() {
			iziToast.settings({
				position: 'topCenter',
				transitionIn: 'bounceInDown',
				timeout: 3000,
				close: false,
			});
			//	滚动条美化
			new PerfectScrollbar('.sidebar-fixed .sidebar-content', {
				wheelSpeed: 2,
				wheelPropagation: true
			});
		});
	</script>
	<style>
		.navbar-top .iziToast-wrapper-topCenter{margin-top: 40px}
		iframe {
			border: none;
			width: 100%; /* takes precedence over the width set with the HTML width attribute */
			height: 100%; /* takes precedence over the width set with the HTML height attribute */
		}


		.dropdown-menu {
			-webkit-transform: scale3d(1,0,1);
			transform: scale3d(1,0,1);
			-webkit-transform-origin: 50% 0%;
			transform-origin: 50% 0%;
			-webkit-transition: -webkit-transform 0.3s;
			transition: transform 0.3s;
		}
		.dropdown-menu.show{
			-webkit-transform: scale3d(1,1,1);
			transform: scale3d(1,1,1);
			-webkit-transition: none;
			transition: none;
			-webkit-animation: expand 0.6s ease-out;
			animation: expand 0.6s ease-out;
		}
		@keyframes expand {
			0% { -webkit-transform: scale3d(1,0,1); transform: scale3d(1,0,1); }
			25% { -webkit-transform: scale3d(1,1.2,1); transform: scale3d(1,1.2,1); }
			50% { -webkit-transform: scale3d(1,0.85,1); transform: scale3d(1,0.85,1); }
			75% { -webkit-transform: scale3d(1,1.05,1); transform: scale3d(1,1.05,1); }
			100% { -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1); }
		}

	</style>
</head>

<body class="navbar-top">
<c:set var="menuList" value="${fns:queryMenuList()}"/>
<div class="navbar navbar-expand-md navbar-dark bg-primary fixed-top">
	<div class="navbar-header navbar-dark bg-primary d-none d-md-flex align-items-md-center">
		<div class="navbar-brand navbar-brand-md p-0">
			<h3 class="p-0 m-0"><i class="icon-shield2 mr-2"></i>${fns:getConfig('productName')}</h3>
		</div>

		<div class="navbar-brand navbar-brand-xs">
			<h3 class="p-0 m-0"><i class="icon-shield2 icon-2x mr-2"></i>${fns:getConfig('productName')}</h3>
		</div>
	</div>
	<div class="d-flex flex-1 d-md-none">
		<div class="navbar-brand mr-auto p-2">
			<h3 class="p-0 m-0"><i class="icon-shield2 icon-2x mr-2"></i>${fns:getConfig('productName')}</h3>
		</div>

		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-mobile">
			<i class="icon-stack2"></i>
		</button>

		<button class="navbar-toggler sidebar-mobile-main-toggle" type="button">
			<i class="icon-paragraph-justify3"></i>
		</button>
	</div>
	<div class="collapse navbar-collapse" id="navbar-mobile">
		<ul class="navbar-nav nav">
			<%--<li class="nav-item">
				<a href="#" class="navbar-nav-link sidebar-control sidebar-main-toggle d-none d-md-block"
					style="background: none !important;">
					<i class="icon-paragraph-justify3"></i>
				</a>
			</li>--%>
			<c:forEach items="${menuList}" var="menu" varStatus="s">
				<c:if test="${menu.type eq '1' && menu.isShow eq '1'}">
					<c:if test="${s.index < 3}">
						<c:if test="${menu.href eq '#'}">
							<li class="nav-item"><a class="navbar-nav-link ${s.index==0?'active':''}" data-toggle="tab" href="#tab-${menu.id}"><span>${menu.name}</span></a></li>
						</c:if>
						<c:if test="${menu.href ne '#'}">
							<li class="nav-item"><a class="navbar-nav-link ${s.index==0?'active':''}" href="${menu.href}" target="${menu.target}"><span>${menu.name}</span></a></li>
						</c:if>
					</c:if>
				</c:if>
			</c:forEach>
			<shiro:hasAnyRoles name="SYS_MANAGER,NIM_MANAGER">
				<c:if test="${menuList.size() gt 3}">
					<li class="nav-item dropdown">
						<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown"></a>
						<div class="dropdown-menu">
							<c:forEach items="${menuList}" var="menu" varStatus="s">
								<c:if test="${menu.type eq '1' && menu.isShow eq '1'}">
									<c:if test="${s.index > 2}">
										<c:if test="${menu.href eq '#'}">
											<a class="dropdown-item" data-toggle="tab" href="#tab-${menu.id}"><span>${menu.name}</span></a>
										</c:if>
										<c:if test="${menu.href ne '#'}">
											<a class="dropdown-item" href="${menu.href}" target="${menu.target}"><span>${menu.name}</span></a>
										</c:if>
									</c:if>
								</c:if>
							</c:forEach>
						</div>
					</li>
				</c:if>
			</shiro:hasAnyRoles>
		</ul>
		<ul class="nav navbar-nav ml-xl-auto">
			<li class="nav-item dropdown dropdown-user">
				<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">
					<img src="${ctx}/static/global_assets/images/placeholders/placeholder.jpg" class="rounded-circle" alt="">
					<span>${fns:getUser().name}</span>
				</a>
				<div class="dropdown-menu dropdown-menu-right">
					<a class="dropdown-item" href="${ctxAdmin}/sys/user/info" target="mainFrame"><i class="icon-user-plus"></i>个人中心</a>
					<a class="dropdown-item" href="${ctxAdmin}/sys/user/modifyPwd" target="mainFrame"><i class="icon-cog5"></i>密码重置</a>
					<div class="dropdown-divider"></div>
					<a class="dropdown-item" href="${ctxAdmin}/logout"><i class="icon-switch2"></i>登出系统</a>
				</div>
			</li>
		</ul>
	</div>
</div>
<div class="page-content">
	<div class="sidebar sidebar-dark sidebar-main sidebar-fixed sidebar-expand-md">
		<div class="sidebar-mobile-toggler text-center">
			<a href="#" class="sidebar-mobile-main-toggle">
				<i class="icon-arrow-left8"></i>
			</a>
			导航菜单
			<a href="#" class="sidebar-mobile-expand">
				<i class="icon-screen-full"></i>
				<i class="icon-screen-normal"></i>
			</a>
		</div>
		<div class="sidebar-content">
			<div class="card card-sidebar-mobile tab-content">
				<c:forEach items="${menuList}" var="navMenu" varStatus="s">
				<c:if test="${navMenu.type eq '1'}">
				<ul data-nav-type="accordion" class="nav nav-sidebar tab-pane fade ${s.index eq 0 ? 'active show' : ''}" id="tab-${navMenu.id}">
					<li class="nav-item"><a href="${ctxAdmin}" class="nav-link"><i class="icon-home"></i><span>系统首页</span></a></li>
					<c:forEach items="${navMenu.children}" var="menu1">
					<li class="nav-item  ${fn:length(menu1.children) > 0 ? 'nav-item-submenu' :''}">
						<a class="nav-link" href="${fn:indexOf(menu1.href, '://') eq -1 ? ctxAdmin : ''}${menu1.href  eq '#' ? '/404' : menu1.href}"
						   target="${not empty menu1.target ? menu1.target : 'mainFrame'}"><i class="icon-database"></i><span>${menu1.name}</span></a>
						<c:if test="${fn:length(menu1.children) > 0}">
						<ul class="nav nav-group-sub" data-submenu-title="${menu1.name}">
							<c:forEach items="${menu1.children}" var="menu2">
							<li class="nav-item ${fn:length(menu2.children) > 0 ? 'nav-item-submenu' :''}">
								<a class="nav-link" href="${fn:indexOf(menu2.href, '://') eq -1 ? ctxAdmin : ''}${menu2.href  eq '#' ? '/404' : menu2.href}"
								   target="${not empty menu2.target ? menu2.target : 'mainFrame'}"><i class="icon-database"></i><span>${menu2.name}</span></a>
								<c:if test="${fn:length(menu2.children) > 0}">
								<ul class="nav nav-group-sub">
									<c:forEach items="${menu2.children}" var="menu3">
									<li class="nav-item ${fn:length(menu3.children) > 0 ? 'nav-item-submenu' :''}">
										<a class="nav-link" href="${fn:indexOf(menu3.href, '://') eq -1 ? ctxAdmin : ''}${menu3.href  eq '#' ? '/404' : menu3.href}"
										   target="${not empty menu3.target ? menu3.target : 'mainFrame'}"><i class="icon-database"></i><span>${menu3.name}</span></a>
									</li>
									</c:forEach>
								</ul>
								</c:if>
							</li>
							</c:forEach>
						</ul>
						</c:if>
					</li>
					</c:forEach>
				</ul>
				</c:if>
				</c:forEach>
			</div>
		</div>
	</div>
	<div class="content-wrapper">
		<iframe id="mainFrame" name="mainFrame" src="${ctx}/home"></iframe>
	</div>
</div>
</body>
</html>